<?php include "include/header.php" ?>
	<div class="main-content">
		<div class="container">
		<video id="alarm-voice" src="../slog/fonts/alarm.mp3" style="display:none" loop="loop" name="media"></video>
			<div class="row">
				<div class="col-md-8">
					<!-- Home chart widget -->
					<div class="widget">
						<div class="widget-head br-lblue">
							<h3 class="col-md-3" style="line-height:30px"><i class="fa fa-bar-chart-o"></i> Realtime Report</h3>
								<form id="real_search_form">
									<div class="col-md-3">
										<select name="item_server" id="real_item_server" class="form-control">
											<?php foreach ( $realtime_servers as $row ) { ?>
											<option value="<?=$row['item_server']?>"><?=$row['item_server']?></option>
											<?php } ?>
										</select>
									</div>
									<div class="col-md-3">
										<select name="item_id" id="real_item_id" class="form-control">
											<?php foreach ( $realtime_item_names as $row ) { ?>
											<option value="<?=$row['item_id']?>"><?=$row['item_name']?></option>
											<?php } ?>
										</select>
									</div>
									<div class="col-md-2">
										<input type="submit" id="real_search_btn" class="form-control btn btn-default btn-lg" value="Search">
									</div>
								</form>
							<div class="clearfix"></div>
						</div>
						<div class="widget-body">
						
							<!-- Tab panes -->
							<div class="tab-content">
								
								<div class="tab-pane active in fade" id="c-one">
									<!-- Chart three -->
									<div class="chart-one">
										<!-- Real time chart placeholder -->
										<div id="m-real-chart"></div>
										<hr />
										<!-- Update interval for realtime chart -->
										Update Interval : <input id="updateInterval" type="text" class="form-control input-sm" value="">
										
									</div>
								</div>
							</div>
							
						</div>
					</div>					
				</div>
				
				<div class="col-md-4">
					<!-- Main area chart -->
					<div class="widget">
						<div class="widget-head br-red">
							<h3><i class="fa fa-desktop"></i> Latest Updates</h3>
						</div>
						<div class="widget-body">
							<!-- Sparkline chart -->
							<div class="m-spark-chart text-center">
								<div class="row">
									<div class="col-md-4 col-sm-6 col-xs-6">
										<div id="spark1"></div>
										<!-- Chart details -->
										<h5>CPU</h5>
									</div>
									<div class="col-md-4 col-sm-6 col-xs-6">
										<div id="spark2"></div>
										<!-- Chart details -->
										<h5>内存</h5>
									</div>
									<div class="col-md-4 col-sm-12 col-xs-12">
										<div id="spark3"></div>
										<!-- Chart details -->
										<h5>PV</h5>
									</div>
									
								</div>
							</div>
							<hr />
							<!-- Pie chart -->
							<div class="m-pie-chart">
								<div class="row">
									<div class="col-md-6 col-sm-6 col-xs-6">
										<!-- Pie chart placeholder -->
										<div id="m-pie-chart"></div>
									</div>
									<div class="col-md-6 col-sm-6 col-xs-6">
										<!-- Pie chart info -->
										<ul class="list-unstyled">
											<li><span class="badge badge-danger">5</span> &nbsp; <strong>CPU</strong></li>
											<li><span class="badge badge-success">8</span> &nbsp; <strong>内存</strong></li>
											<li><span class="badge badge-info">4</span> &nbsp; <strong>PV</strong></li>
										</ul>
									</div>
								</div>
							</div>
						</div>
					</div>
							
				</div>
			</div>
			<div class="knobs text-center">
				<div class="row">
					<div class="col-md-2 col-sm-6 col-xs-6">
						<!--
						<div class="knob-item">
							
							<h4>CPU</h4>
							
							<input type="text" value="85" class="knob" data-fgColor="#f75353" data-angleArc="360" data-angleOffset="-125" data-bgColor="#e8e8e8" data-width="110" data-thickness=".1">
						</div>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-6">
						<div class="knob-item">
							<h4>内存</h4>
							<input type="text" value="65" class="knob" data-fgColor="#32c8de" data-angleArc="360" data-angleOffset="-125" data-bgColor="#e8e8e8" data-width="110" data-thickness=".1">
						</div>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-6">
						<div class="knob-item">
							<h4>PV</h4>
							<input type="text" value="35" class="knob" data-fgColor="#51d466" data-angleArc="360" data-angleOffset="-125" data-bgColor="#e8e8e8" data-width="110" data-thickness=".1">
						</div>
					</div>
					<div class="col-md-2 col-sm-6 col-xs-6">
						<div class="knob-item">
							<h4>温度</h4>
							<input type="text" value="35" class="knob" data-fgColor="#81d8c6" data-angleArc="360" data-angleOffset="-125" data-bgColor="#e8e8e8" data-width="110" data-thickness=".1">
						</div>
					</div>-->
				</div>
			</div> 
	

			<div class="page-content">
				<!-- Heading -->
					<div class="single-head">
						<!-- Heading -->
						<h3 class="pull-left"><i class="fa fa-table purple"></i> Everyday Log Report</h3>
						<!-- Bread crumbs -->
						<div class="breads pull-right">
							<strong>Nav</strong> : <a href="<?=base_url('/')?>">Home</a> / <a href="<?=base_url('report')?>">Dashboard</a>
						</div>
						<div class="clearfix"></div>
					</div>
					<form id="searchForm">
						<div class="col-md-2">
							<select name="report_id" id="report_id" class="form-control">
								<option value="">Select group name</option>
								<?php foreach ( $report_names_list as $row ) { ?>
								<option value="<?=$row['report_id']?>"><?=$row['report_name']?></option>
								<?php } ?>
							</select>
						</div>
						<div class="group_lists"></div>
						<div id="datetimepicker" class="col-md-2 input-append input-group dtpicker" style="float:left">
							<input type="text" class="form-control" name="data_date" />
							<span class="input-group-addon add-on">
							<i data-time-icon="fa fa-times" data-date-icon="fa fa-calendar" class="fa fa-calendar"></i>
							</span>
						</div>
						<div class="col-md-1">
							<input type="submit" class="form-control btn btn-default btn-lg" value="Search">
						</div>
					</form>
					<div class="clearfix"></div>
					<!-- Table Page -->
					<div class="page-tables">
					<!-- Heading -->
					<h4></h4> 
					<!-- Table -->
					<div class="table-responsive">
						<table class="table table-hover table-bordered ">
							<caption style="font-size:14px"><span id="name_date"><?=$data_arrays['group_name']?> &nbsp;&nbsp; <?=$data_arrays['data_date']?></span>
										<span style="float:right;font-size:20px;"><a class="btn btn-xs" data-toggle="modal" href="#email_table"><i class="fa fa-envelope" style="font-size:18px;"></i></a></span></caption>
							<thead>
								<tr>
									<th>Item Name</th>
									<th>Today</th>
									<th>Yesterday</th>
									<th>Daily Change</th>
									<th>Last Week</th>
									<th>Weekly Change</th>
									<th>Last Month</th>
									<th>Monthly Change</th>
									<th>History</th>
								</tr>
							</thead>
							<tbody>
								<?php foreach ($data_arrays['report_datas'] as $row ) { ?>
								<tr>
									<td><?=$row['item_name']?></td>
									<td><?=$row['today_data']?></td>
									<td><?=$row['yesterday_data']?></td>
									<td><?=$row['yesterday_rate']?></td>
									<td><?=$row['lastweek_data']?></td>
									<td><?=$row['lastweek_rate']?></td>
									<td><?=$row['lastmonth_data']?></td>
									<td><?=$row['lastmonth_rate']?></td>
									<td><a id="<?=$row['item_key']?>" class="eye btn btn-xs"><i class="fa fa-eye" style="font-size:16px"></i></a></td>								
								</tr>
								<?php } ?>                                
							</tbody>
						</table>
					</div>
					<br>	
					<div class="actions">
							<!--<button class="switcher btn btn-default" id="column">
									            column</button>
							<button class="switcher btn btn-default" id="area">
									            area</button>
							<button class="switcher btn btn-default" id="line">
									            line</button>
							<button class="switcher btn btn-default" id="spline">
									            Spine</button>
							<button class="switcher btn btn-default" id="areaspline">
							            areaspline</button>-->
						</div><br>
						<div class="chart-container">
							<div id="chart_0" class="chart"></div><br/>
							<div id="chart_1" class="chart"></div><br/>
							<!--<div id="chart_2" class="chart"></div>-->
						</div>
						<hr /><!-- Horizontal Line -->
					</div><!-- Table Page End-->
							<!-- email modal form -->
							<div class="modal fade" id="email_table" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
								<div class="modal-dialog">
								    <div class="modal-content">    
					 			        <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										        <h4 class="modal-title" id="exampleModalLabel">Email This Table</h4>
										</div>
									    <div class="modal-body">
										    <form id="sendmailForm" class="form-horizontal" role="form">
												<div class="form-group" id="email_form_group">
													<label for="email" class="col-lg-2 control-label">Email</label>
													<div class="col-lg-10">
														<input type="text" name="email" class="form-control" id="email" placeholder="Email address">
													</div>
												</div>
												<div class="form-group">
													<label for="subject" class="col-sm-2 control-label">Subject</label>
													<div class="col-sm-10">
														<input type="text" name="subject" class="form-control" id="subject" placeholder="Email title" />
													</div>
												</div>
												<div class="form-group hidden">
													<label for="message" class="col-sm-2 control-label">Message</label>
													<div class="col-sm-10">
														<textarea id="email_content" class="" name="content" class="form-control" placeholder="Type your message ..." style="width: 100%; height: 200px"></textarea>
													</div>
												</div>
												<button type="submit" class="btn btn-info btn-block">Send mail</button>
										    </form>
										</div>
										<div class="clearfix"></div>
										<div class="modal-footer"></div>
								    </div>
						        </div>
							</div>
							<!-- email modal form -->
							<!-- alarm modal form -->
							<div class="modal fade" id="alarm-detail" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
								<div class="modal-dialog">
								    <div class="modal-content">
								    	<form class="form-horizontal" role="form" method="post" action="<?=base_url('realtime_data/solve_alarm')?>">
    
					 			        <div class="modal-header">
									        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
										        <h4 class="modal-title" id="exampleModalLabel">Alarm Information Details</h4>
										</div>
									    <div class="modal-body">
										    <div id="alarm-content"></div>
										    <input type="text" id="alarm-id" name="alarm_id" hidden/>
										</div>
										<div class="clearfix"></div>
										<div class="modal-footer"><button type="submit" class="btn btn-info btn-block">Solved</button></div>
								    	</form>
								    </div>
						        </div>
							</div>
							<!-- alarm modal form -->

						</div>
					</div>
				</div>						
			</div>
		</div>
				
	</div>
	<!-- Mainbar ends -->
			
			<div class="clearfix"></div>
		</div>
<?php include "include/js.php" ?>
<script src="<?=base_url('js/highcharts.js')?>"></script>
<script src="<?=base_url('js/grid.js')?>"></script>
<script src="<?=base_url('js/main.js')?>"></script>
<script>
$(document).ready(function(){
	
	$("#email_table").on('show.bs.modal', function (event) {
		var header = "<head><meta chaset='utf-8'><title>Report Data</title><style>table{font-family: verdana,arial,sans-serif;font-size:11px;color:#333333;border-width: 1px;border-color: #a9c6c9;border-collapse: collapse;}table caption{font-size:16px;line-height:28px;text-align:left;font-weight:bold;}table th {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;background-color: #c3dde0;}table td:first-child{background-color: #d4e3e5;}table td {border-width: 1px;padding: 8px;border-style: solid;border-color: #a9c6c9;background-color: #ffffff;}</style></head><body>";
		var footer = "</body></html>";
		var content = $(".page-tables").html();
		var email_content = header+content+footer;
		var modal = $(this);
		modal.find('#email_content').val(email_content);
	});
	$('#sendmailForm').ajaxForm({
        beforeSubmit:function(){if ($('#email').val() == '' || !$('#email').val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)) {
                       $('#email_form_group').addClass('has-error');return false;}
                     },
        type: 'post',
        url: "<?=base_url('mail/send_mail')?>",
        dataType: 'json',
        resetForm: true,
        success: function(){
        	$('#email_table').modal('hide');
        }
    });
    $("#report_id").change(function(){
    	$(".group_lists").html("");
    	var reportId=$(this).val(); 
    	var groupName=<?php echo json_encode($group_names_list);?>;
    	$(".group_lists").append("<div class='col-md-2'><select name='group_id' id='group_id' class='form-control'></select></div>");
    	for(var i=0;i<groupName.length;i++){ 
    		for(var key in groupName[i]) { 
    			if(key==="report_id" && groupName[i][key]===reportId)
    			$("#group_id").append("<option value='"+groupName[i]['group_id']+"'>"+groupName[i]['group_name']+"</option>");
    		}
    	}
    });
    $('#searchForm').ajaxForm({
        beforeSubmit:function(){if ($('#group_id').val() =='' || $('#group_id').val() == undefined) {
                       alert("Not select report name or group name");}
                     },
        type: 'post',
        url: "<?=base_url('report/show_data')?>",
        dataType: 'json',
        success: function(data){
        	$(".table tbody").html("");
        	$("#name_date").html(""); 
        	for(var i=0;i<data.report_datas.length;i++){
        		$(".table tbody").append("<tr><td>"+data.report_datas[i].item_name+"</td><td>"+data.report_datas[i].today_data+"</td><td>"+data.report_datas[i].yesterday_data+"</td><td>"+data.report_datas[i].yesterday_rate+"</td><td>"+data.report_datas[i].lastweek_data+"</td><td>"+data.report_datas[i].lastweek_rate+"</td><td>"+data.report_datas[i].lastmonth_data+"</td><td>"+data.report_datas[i].lastmonth_rate+"</td><td><a id='"+data.report_datas[i].item_key+"' class='eye btn btn-xs'><i class='fa fa-eye' style='font-size:16px'></i></a></td></tr>"); 	 
      		}
      		$("#name_date").append(data.group_name+"&nbsp;&nbsp;&nbsp;"+data.data_date);
      		generate_chart();
        }
    });
	
	$('#datetimepicker').datetimepicker({
	    format: 'yyyy-MM-dd',
	    language: 'cn',
	    pickDate: true,
	    pickTime: true,
	    hourStep: 1,
	    minuteStep: 15,
	    secondStep: 30,
	    inputMask: true
	});

	$("#alarm-detail").on('show.bs.modal', function (event) {
		var button = $(event.relatedTarget);
		var alarm_content = button.html();
		var alarm_id = button.parent().attr("class");
		var modal = $(this);
		modal.find('#alarm-content').html(alarm_content);
		modal.find('#alarm-id').val(alarm_id);
	});
});
</script>

<?php include "include/footer.php" ?>